<template>
	<view id="healthy">
		<!-- banner -->
		<u-swiper :list="indexBanner" keyName='image' circular height="320" mode="none"></u-swiper>
		<!-- 欢迎语 -->
		<view class="Welcome">
			<image :src="vuex_httpImageUrl&& vuex_httpImageUrl + 'static/index/huanyingyu.png'" mode="widthFix"></image>
			<image :src="vuex_httpImageUrl&&vuex_httpImageUrl + 'static/index/yy.png'" mode="aspectFill"
				style="height: 80rpx;position: relative; left: -10px ;margin: 0;"></image>
			<text style=" position: relative; left: -10px; ">您的贴身健康数据专家小挥欢迎您!</text>
		</view>
		
		<!-- 天气 -->
		<view class="weather" v-if="JSON.stringify(tianqi) != '{}'">
			<text>{{tianqi.rili}}</text>
			<text>{{tianqi.week}}</text>
			<text>{{tianqi.nongli}}</text>
			<text>{{tianqi.weather}}</text>
			<text>{{tianqi.tempera}}°C</text>
		</view>

		<!-- menu -->
		<view class="menu u-font-12 common u-m-t-20">
			<swiper class="swiper" @change="menuChange">
				<swiper-item v-for="(item,index) in menu" :key='index'>
					<view class="item u-flex">
						<view v-for="(ite,ind) in item" :key="ind" @click="C_menuItem(ite.pageUrl)">
							<image :src="ite.img" mode="widthFix" class="u-m-b-15 u-m-t-15"></image>
							<text>{{ite.name}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicator">
				<text v-for="(item,index) in menu.length" :key='index' class="u-m-r-10"
					:class="index == menuActive?'active':''"></text>
			</view>
		</view>

		<!-- 日期 -->
		<view class="dateAll common">
			<view class="day">
				<view v-for="(item,index) in date.day" :key="index">
					<text class="date " v-if="item.status == 0"> {{item.time_name}} </text>
					<text class="date k2" v-if="item.status == 1"> {{item.time_name}} </text>
					<text class="date k1" v-if="item.status == 2"> 今天 </text>
					<text class="font u-font-12" v-if="item.status == 0">未打卡</text>
					<text class="font color u-font-12" v-if="item.status == 1">已打卡</text>
					<text class="font color u-font-12" v-if="item.status == 2">打卡中</text>
					<image v-if="item.status == 1" :src="vuex_httpImageUrl+'static/index/xuanzhong.png'"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="classfiy">
				<view v-for="(item,index) in local_project" :key="index"
					@click="C_proItem(item.en_name,item.name,index)">
					<image :src="pro_img+(item.status == 0?'wdk/':item.status == 1?'ydk/':'ddk/')+item.name+'.png'"
						mode="widthFix" />
					<text>{{item.name}}</text>
				</view>
				<!-- <text 
					v-for="(item,index) in date.classify" 
					:key="index"
					@click="C_classfiy(item,index)"
					:class="[
						item.punch_status == 1?'ytj':'',
						date.classifyActive == index?'thisClickActive':''
					]"
				>{{item.name}}</text> -->
			</view>
			<view class="list" v-if="local_project_content.length">
				<view v-for="(item,index) in local_project_content" :key='index'>
					<view v-if="item.isother">
						<view v-for="(itemss,indexss) in item.arr">
							<view class="custom">
								<view class="title1">
									<view class="ti">标题</view>
									<input disabled placeholder="您可以自行填写" v-model="itemss.name.title" />
								</view>
								<view class="cut"
									style="height: 2rpx;background-color: #F1F1F1;margin-left: 102rpx;width: 255rpx;">
								</view>
								<view class="title1">
									<view class="ti">内容</view>
									<input :disabled="item.dstatus == 1" placeholder="您可以自行填写"
										v-model="itemss.name.value" />
								</view>

							</view>
						</view>
						<view v-for="(item,index) in linshi">
							<view class="custom">
								<view class="title1">
									<view class="ti">标题</view>
									<input placeholder="您可以自行填写" v-model="item.title" />
								</view>
								<view class="cut"
									style="height: 2rpx;background-color: #F1F1F1;margin-left: 102rpx;width: 255rpx;">
								</view>
								<view class="title1">
									<view class="ti">内容</view>
									<input placeholder="您可以自行填写" v-model="item.content" />
								</view>

							</view>
						</view>
						<view class="custom" v-if="item.dstatus == 2 && item.arr == 0">
							<view class="title1">
								<view class="ti">标题</view>
								<input placeholder="您可以自行填写" v-model="othertitle" />
							</view>
							<view class="cut"
								style="height: 2rpx;background-color: #F1F1F1;margin-left: 102rpx;width: 255rpx;">
							</view>
							<view class="title1">
								<view class="ti">内容</view>
								<input placeholder="您可以自行填写" v-model="othercontent" />
							</view>
						</view>
						<view class="addButton">
							<image @click="addAction" src="../../static/addbu.png"></image>
							<view @click="addAction">添加</view>
						</view>
					</view>
					<view v-else>
						<view class="title">{{index+1}}.{{item.tit}}</view>
						<!-- style="
						display:grid;
						grid-template-columns:repeat(4,1fr);
					" -->

						<view v-if='item.column' style="
							display:flex;
							flex-wrap:wrap;
						">

							<view v-if="item.isSlider" style='
							    display: flex;
							    grid-column-start: 1;
							    grid-column-end: 5;
							    justify-content: space-between;
								width: 100%;
							'>
								<text v-for="(ite,idx) in item.arr" :key='idx'>{{ite}}</text>
							</view>
							<block v-else>
								<view v-for="(ite,idx) in item.arr" :key='idx' @click='C_dx(index,idx,ite.ischeck,item)'
									style='display: flex; align-items: center;margin: 20rpx 0;min-width:20%'>
									<image style='width: 30rpx; height: 30rpx;margin-right: 10rpx;' v-if="ite.ischeck"
										:src="vuex_httpImageUrl+'/static/common/yxz.png'" mode="widthFix"></image>
									<image style='width: 30rpx; height: 30rpx;margin-right: 10rpx;' v-else
										:src="vuex_httpImageUrl+'/static/common/wxz.png'" mode="widthFix"></image>
									<text>{{ite.name}}</text>
								</view>
							</block>
						</view>
						<view v-else
							style=" display: flex; justify-content: space-between; margin-bottom: 7px; margin-top: 10px; "
							:style="!item.isSlider?'flex-direction: column;':''">
							<block v-if="item.isSlider">
								<text v-for="(ite,idx) in item.arr" :key='idx'>{{ite}}</text>
							</block>
							<block v-else>
								<view v-for="(ite,idx) in item.arr" :key='idx' @click='C_dx(index,idx,ite.ischeck)'
									style='display: flex; align-items: center;margin: 20rpx 0;'>
									<image style='width: 30rpx; height: 30rpx;margin-right: 10rpx;' v-if="ite.ischeck"
										:src="vuex_httpImageUrl+'/static/common/yxz.png'" mode="widthFix"></image>
									<image style='width: 30rpx; height: 30rpx;margin-right: 10rpx;' v-else
										:src="vuex_httpImageUrl+'/static/common/wxz.png'" mode="widthFix"></image>
									<text>{{ite.name}}</text>
								</view>
							</block>
						</view>
					</view>
					<aaaa :decimal=item.type :jinyong='item.show_status' v-if="item.isSlider" :start='item.arr[0]'
						:end='item.arr[item.arr.length-1]' :value='item.selectVal' :step='5' :status='item.status'
						:range='item.range' :index='index' @change='moving'></aaaa>
					<view v-if="item.content">
						<textarea :disabled='item.show_status' class="textarea" placeholder="请输入其他情况"
							v-model="item.contva"></textarea>
					</view>
				</view>
			</view>
			<button class="submit" @click="C_submit" v-if="local_project_content.length">立即提交</button>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="alert">
				<image :src="indexAlert.image" mode="widthFix" @click="$refs.popup.close()"></image>
				<image :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/x.png'" mode="widthFix" class="close"
					@click="$refs.popup.close()"></image>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import aaaa from './aaaa.vue';
	export default {
		components: {
			aaaa
		},
		data() {
			return {
				pro_img: 'http://img.hexinle.top/healthySupervision/static/index/classify/',
				original_pro: [], //项目原始数据
				local_project: [], //分类项
				local_project_content: [], //列表数组
				prevIndex: null, //上一次点击的下标
				currentStatus: 'eraturejson', //默认是体温
				list: [],
				indexBanner: [],
				menu: [],
				menuActive: 0,
				date: {
					day: [],
					// classify: [],
					// classifyActive: 0,
					list: [],
				},
				indexBounced: {},
				indexAlert: {},
				tianqi: {},
				linshi: [],
				othertitle: '',
				othercontent: '',
				canediter: false,

				yuanshuju: {},
				tishiyu: '您已打卡'
			};
		},
		async mounted() {

			if (!this.vuex_token) {
				uni.reLaunch({
					url: '/pages/login/loginPassword/loginPassword'
				})
				return
			}

			this.def_database() //默认数据

			let banner = await this.$u.api.indexBanner(); //首页轮播图
			this.indexBanner = banner.data;

			this.indexBounced = await this.$u.api.indexBounced(); //首页弹窗
			let indexPunch = await this.$u.api.indexPunch(); //打卡日期
			this.date.day = indexPunch.data;
			let thisDayTime = indexPunch.data.filter(item => item.status == 2)[0].time
			this.getclassify({
				time: thisDayTime
			})

			this.$u.post('/index/bounced').then(res => {
				// console.log(res.data);
				this.indexAlert = res.data
				// 控制首页弹窗是否显示
				// this.indexAlert.status == '1'?this.$refs.popup.open():''
			})
		},
		onShow() {
			this.init()
			this.def_weather()
		},
		methods: {
			addAction() {
				if (this.local_project_content[0].isother == 1 && this.local_project_content[0].dstatus == 1) {
					this.$u.toast(this.tishiyu)
					return
				} else {


				}
				let ob = {
					title: '',
					content: ''
				}
				this.linshi.push(ob)
			},
			C_dx(index, idx, ischeck, ite) {
				console.log('选择器', index, idx, ischeck, ite);
				if (ite.show_status) {
					this.$u.toast(this.tishiyu)
					return
				}
				this.local_project_content[index].arr[idx].ischeck = !ischeck
			},
			def_weather() {
				uni.getLocation({
					success: async res => {
						let {
							latitude: lat,
							longitude: lng
						} = res;
						let params = {
							lat,
							lng
						};
						let weatherdb = await this.$u.api.weather(params);
						let {
							nongli,
							rili,
							weather,
							week,
							tempera
						} = weatherdb.data;
						this.tianqi = {
							nongli,
							rili,
							weather,
							week,
							tempera
						};
					}
				})
			},
			moving(params) {
				let {
					status,
					index,
					score
				} = params
				this.local_project_content[index].selectVal = score
			},
			init() {
				this.$u.post('/Appuser/punday').then(res => {
					this.local_project = res.data
					this.original_pro = JSON.parse(JSON.stringify(res.data))
				})
				// 默认体温
				
			},
			// 点击项目
			C_proItem(enname, name, index) {
				console.log('点击项目', enname, name, index);

				this.local_project_content = []

				this.currentStatus = enname

				this.local_project[index].status = 2

				if (this.prevIndex != null) {
					this.local_project[this.prevIndex].status = this.original_pro[this.prevIndex].status
				}
				this.prevIndex = index

				this.$u.post('/Appuser/pundanday', {
					json: enname
				}).then(res => {
					this.local_project_content = res.data
					this.yuanshuju = JSON.parse(JSON.stringify(res.data))
					if (enname == 'otherjson') {
						// console.log('youel', this.local_project_content);
						// this.local_project_content[0].arr = []
						if (this.local_project_content.length) {
							if (this.local_project_content[0].arr.length) {
								// console.log(this.local_project_content[0].arr, "122222222222");
								
							} else {
								
							}
						}
					}
				})

				// this.local_project_content = JSON.parse(JSON.stringify(local_project_content[enname]))
			},

			async getclassify(params) {
				// let classify = await this.$u.api.indexpunchItem(params); //打卡项目
				// this.date.classify = classify.data;
				// this.listInfo(classify.data[this.date.classifyActive].id)
			},
			async listInfo(punch_item_id, time = this.getNowTime()) {
				let params = {
					punch_item_id,
					time
				};
				let list = await this.$u.api.indexpunchInfo(params); //打卡项目内容
				// console.log(JSON.parse(JSON.stringify(list)));
				this.date.list = list.data;
			},
			async C_submit() {

				if (this.local_project_content[0].isother == 1 && this.local_project_content[0].dstatus == 1) {
					this.$u.toast('今日已填报')
					return
				}
				
				let arm = JSON.parse(JSON.stringify(this.local_project_content))
				let arm1 = JSON.parse(JSON.stringify(this.yuanshuju))
				let fana = this.jianceshifouxiugai(arm, arm1)

				let obj = {
					[this.currentStatus]: fana

				};
				if (this.currentStatus == 'otherjson') {

					obj.otherjson[0].otherdata = this.jiancelinshi()
				}
				console.log(obj);
			
				let submit = await this.$u.api.indexputPunch(obj); //打卡项目内容
				if (submit.code == 0) {
					
					this.local_project_content = submit.data[this.currentStatus]
					console.log(submit.data[this.currentStatus]);
					if (this.currentStatus == 'otherjson'){
						this.linshi = []
					}
					this.$u.toast('今日已填报，保存成功')
				}
			},
			jianceshifouxiugai(ojb1, obj2) {

				for (let i = 0; i < ojb1.length; i++) {

					if (ojb1[i].isSlider) {
						if (ojb1[i].selectVal == obj2[i].arr[0]) {
							ojb1[i].show_status = false
						} else {
							ojb1[i].show_status = true
						}
					}
					if (ojb1[i].column) {
						console.log(ojb1[i], '目标');
						ojb1[i].show_status = this.jiance2(ojb1[i])

						// for (let j = 0 ; j< ojb1[i].arr.length; j++){
						// 	let l = ojb1[i].arr[j].ischeck

						// 	if (l){
						// 		ojb1[i].arr[j].show_status = true

						// 	}else{
						// 		ojb1[i].arr[j].show_status = false
						// 	}
						// }
					}
					if (ojb1[i].content) {
						if (ojb1[i].contva.length) {
							ojb1[i].show_status = true
						} else {
							ojb1[i].show_status = false
						}
					}
					// ojb1[i].show_status = this.jiance2(ojb1[i],obj2[i])

				}
				console.log(ojb1, '结果');
				return ojb1

			},

			jiance2(ojb1) {
				for (let j = 0; j < ojb1.arr.length; j++) {
					let l = ojb1.arr[j].ischeck

					if (l) {
						console.log('发信啊了');
						return true

					}
				}
				return false
			},

			//检测数据
			jiancelinshi() {
				let arr = []
				// for (let i = 0 ; i < this.local_project_content[0].arr.length ; i ++){
				// 	let ob = {}
				// 	ob.content = this.local_project_content[0].arr[i].name.value
				// 	ob.title = this.local_project_content[0].arr[i].name.title
				// 	arr.push(ob)
				// }
				for (let i = 0; i < this.linshi.length; i++) {

					if (this.linshi[i].title.length && this.linshi[i].content.length) {
						arr.push(this.linshi[i])
					}
				}
				if (this.othertitle && this.othercontent) {
					let ob = {
						title: this.othertitle,
						content: this.othercontent
					}
					arr.push(ob)
				}
				
				return arr
			},
			// 获取当前时间
			getNowTime() {
				let dateTime
				let yy = new Date().getFullYear()
				let mm = new Date().getMonth() + 1
				let dd = new Date().getDate()
				let hh = new Date().getHours()
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
				// dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
				dateTime = yy + '-' + mm + '-' + dd
				// console.log(dateTime)
				return dateTime
			},
			def_database() {
				let url = this.vuex_httpImageUrl
				this.menu = [
					[{
							name: '检测数据',
							img: url + 'static/index/menu/index/b1/a1.png',
							pageUrl: '/pages/healthy/menu/one/a1/index?status=1'
						},
						{
							name: '中药查询',
							img: url + 'static/index/menu/index/b1/a2.png',
							pageUrl: '/pages/healthy/menu/one/a1/index?status=2'
						},
						{
							name: '素养提升',
							img: url + 'static/index/menu/index/b1/a3.png',
							pageUrl: '/pages/healthy/menu/one/a3/index'
						},
						{
							name: '服务订购',
							img: url + 'static/index/menu/index/b1/a4.png',
							pageUrl: '/pages/healthy/menu/one/a4/index'
						},
					],
					[{
							name: '同城服务',
							img: url + "static/index/menu/index/b2/a1.png",
							pageUrl: '/pages/healthy/menu/two/a3/index'
						},
						{
							name: '诊检数据存储',
							img: url + "static/index/menu/index/b2/a2.png",
							pageUrl: '/pages/healthy/menu/two/a1/index'
						},
						{
							name: '既往数据',
							img: url + "static/index/menu/index/b2/a3.png",
							pageUrl: '/pages/healthy/menu/two/a2/index'
						},
						{
							name: '数据曲线',
							img: url + "static/index/menu/index/b2/a4.png",
							pageUrl: '/pages/healthy/menu/two/a4/index'
						},
					],
					[{
						name: '分析结果于建议',
						img: url + "static/index/menu/index/b3/a1.png",
						pageUrl: '/pages/healthy/menu/three/a1/index'
					}, ],
				]
			},
			C_menuItem(url) {
				// if(url == '/pages/healthy/menu/two/a1/index'){
				// 	// 诊疗数据识别
				// 	this.$u.toast('开发中..')
				// 	return
				// }
				// if(url == '/pages/healthy/menu/three/a1/index'){
				// 	// 分析结果与建议
				// 	this.$u.toast('开发中..')
				// 	return
				// }
				uni.navigateTo({
					url
				})
			},
			shangchuan(){
				console.log('上传as');
			},
			menuChange(e) {
				this.menuActive = e.detail.current
			},
			C_classfiy(item, index) {
				this.date.classifyActive = index
				let thisDay = this.date.day.filter(item => item.status == 2)[0].time
				this.listInfo(item.id, thisDay)
			},
		}
	}
</script>

<style lang="scss">
	.addButton {
		display: flex;
		margin-top: 22rpx;

		image {
			margin-left: 563rpx;
			width: 35rpx;
			height: 35rpx;
		}

		view {
			margin-left: 14rpx;
			font-size: 28rpx;
			color: #1954e8;
		}
	}

	.custom {
		margin-top: 20rpx;
		width: 100%;
		height: 182rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;

		.title1 {
			margin-left: 40rpx;
			display: flex;
			text-align: center;
			height: 90rpx;

			view {
				font-size: 28rpx;
				line-height: 90rpx;
			}

			input {
				width: 478rpx;
				height: 90rpx !important;
				font-size: 28rpx;
				line-height: 90rpx;
			}
		}
	}

	.textareas {
		margin-top: 30rpx !important;
	}

	.textarea {
		background-color: #F1F1F1;
		width: 630rpx;
		padding: 24rpx;
		height: 150rpx;
	}

	.weather {
		margin: 30rpx;
		font-size: 24rpx;

		text {
			margin-right: 10rpx;
		}
	}

	#healthy {
		.alert {
			position: relative;

			.close {
				position: absolute;
				bottom: -95rpx;
				left: calc(50% - 35rpx);
				width: 70rpx;
				height: 70rpx;
				z-index: 1;
			}
		}

		.common {
			background-color: #FFFFFF;
			width: 95%;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 50rpx #e0e0e0;
		}

		// 欢迎语
		.Welcome {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			padding: 0 25rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-right: 20rpx;
			}
		}

		.menu {
			margin: auto;

			.swiper {
				height: 146rpx;

				image {
					width: 60rpx;
				}

				.item {
					align-items: flex-end;

					>view {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 25%;

						text {
							white-space: nowrap;
						}
					}
				}
			}

			.indicator {
				display: flex;
				justify-content: center;

				text {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50rpx;
					display: block;
					background-color: #BFD1F8;
					transition: all .5s linear;

					&.active {
						background-color: #2C65E8;
						width: 20rpx;
					}
				}
			}
		}

		.dateAll {
			margin: 20rpx auto;

			.day {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				border-bottom: 1px solid #F1F1F1;
				padding-bottom: 20rpx;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					image {
						position: absolute;
						width: 35rpx;
						height: 35rpx;
						top: -20rpx;
						right: -5rpx;
					}

					.date {
						$w: 90rpx;
						width: $w;
						height: $w;
						line-height: $w;
						text-align: center;
						margin-bottom: 20rpx;
						border-radius: 50%;
						background-color: #F1F1F1;
						color: #8A8A8A;
					}

					.color {
						color: #2C67E9;
					}

					.k1 {
						background-color: #FFFFFF;
						font-weight: bold;
						color: #333333;
					}

					.k2 {
						background-color: #FFFFFF;
						border: 5rpx solid #F1F1F1;
					}

				}
			}

			.classfiy {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-gap: 20rpx 0;
				margin-top: 20rpx;

				view {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 60%;
						overflow: scroll;
					}

					text {
						margin-top: 10rpx;
					}
				}

				// padding-top: 20rpx;
				// padding-bottom: 20rpx;
				// border-bottom: 15rpx solid #F1F1F1;
				// display: grid;
				// grid-template-columns: repeat(5, 1fr);
				// grid-gap: 20rpx;

				// >text {
				// 	display: block;
				// 	text-align: center;
				// 	border-radius: 20rpx;
				// 	padding: 10rpx 0;
				// 	background-color: #F1F1F1;
				// 	&.ytj{
				// 		color: #333333;
				// 		border: 1px solid rgba(0,0,0,.1);
				// 		background-color: #FFFFFF;
				// 	}
				// 	&.thisClickActive{
				// 		border: 1px solid #FFFFFF;
				// 		background-color: #FFFFFF;
				// 	}
				// }
			}

			.list {
				>view {
					padding-top: 30rpx;

					.title {
						font-weight: bold;
						background: #F8F9FE;
						padding: 10px;
						border: 1px solid rgba(0, 0, 0, .05);
					}

					input {
						height: 60rpx;
						border-bottom: 1px solid #F1F1F1;
						padding-left: 30rpx;

					}
				}
			}
		}
	}
</style>
